<template>
    <div class="preview_video" style="width:100px;height:60px;">
        <div class="play" @click="isPreview=true">
            <a-icon type="play-circle" theme="filled" />
        </div>
        <video width="100" height="60">
            <source :src="url" type="video/mp4" />
        </video>
        <show-modal title="预览视频" v-if="isPreview" width="500px" @cancel="cancel" :isSure="false">
            <video width="460" controls autoplay>
                <source :src="url" type="video/mp4" />
            </video>
        </show-modal>
    </div>
</template>
<script>
export default {
    name: 'ShowVideo',
    props: {
        url: {
            type: String,
            default: ''
        }
    },
    data(){
        return{
            isPreview:false
        }
    },
    methods: {
        showVideo() {},
        cancel(){
            this.isPreview = false;
        }
    }
};
</script>
<style lang="scss" scoped>
.preview_video{
    position: relative;
    .play{
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        font-size: 30px;
        color: #fff;
        opacity: .7;
        z-index: 9;
    }
}
</style>
